<template>
  <el-dialog v-model="dialogVisible" destroy-on-close @opened="handledlgOpened">
    <div class="qyui-cell col qyui-container">

      <div class="qyui-cell bdr" style="width:200px">
        <ul class="qyui-ul">
          <template v-for="(item,index) in manager.Body.AllGridViews" :key="item.ID">
            <li :class="{'current':currentIndex===index}" @click="handleSelect(index)">
              {{ item.Name }}
            </li>
          </template>
        </ul>
      </div>
      <div class="qyui-cell row bdb">
        <el-form :model="formData" label-width="100px">
          <el-form-item label="名称">
            <el-input v-model="formData.Name"></el-input>
          </el-form-item>
          <el-form-item label="数据集">
            <el-select v-model="formData.dataSourceName">
              <template v-for="item in manager.allDataSets" :key="item.ID">
                <el-option :value="item.Name" :label="item.Name">
                </el-option>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="图层">
            <el-input v-model="formData.ZIndex"></el-input>
          </el-form-item>
          <!-- <el-form-item label="布局-固定表头">
            <el-input disabled></el-input>
          </el-form-item> -->
          <el-form-item label="布局-是否隐藏">
            <el-input disabled></el-input>
          </el-form-item>
          <el-form-item label="表头行可见性">
            <el-input disabled></el-input>
          </el-form-item>
          <el-form-item label="表尾行可见性">
            <el-input disabled></el-input>
          </el-form-item>
          <el-form-item label="明细行可见性">
            <el-input disabled></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="handleDeleteGridView">删除表格</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>
  </el-dialog>
</template>
<script>
import dialogMixin from '@/mixins/dialogMixin.js';
export default {
  mixins: [dialogMixin],
  inject: ['manager'],
  data() {
    return {
      formData: {},
      currentIndex: -1,
    };
  },
  methods: {
    handledlgOpened() {
      if (this.manager.Body.AllGridViews.length > 0) {
        this.handleSelect(0);
      }
    },
    handleSelect(index) {
      this.currentIndex = index;
      this.formData = this.manager.Body.AllGridViews[index];
    },
    handleDeleteGridView() {
      this.manager.states.tableIndex = -1;
      this.manager.states.currentCell = {};
      this.manager.states.visibleCells = [];
      this.manager.states.currentCells = [];
      this.formData = {};
      let index = this.manager.Body.AllGridViews.findIndex(a => a.ID === this.formData.ID);
      this.manager.Body.AllGridViews.splice(index, 1);

      if (this.manager.Body.AllGridViews.length === 0) {
        this.dialogVisible = false;
      } else {
        if (index > 0) {
          index--;
        }
        this.handleSelect(index);
      }
    },
  },
};
</script>
